<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
 <!DOCTYPE html>
<html>

<head>
	<base href="/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    

    <title>vip等级列表</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico"> 
    <link href="static/templet/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="static/templet/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="static/templet/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="static/templet/css/animate.min.css" rel="stylesheet">
    <link href="static/templet/css/style.min862f.css?v=4.1.0" rel="stylesheet">

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
    <form action="keyWord/revision/vipLevel/list" method="post" id="rechargeForm">
        <div class="row">      
            <div class="col-sm-12">
        		<table class="table table-hover">
        			<tr>
        				<td>
        					<select class="form-control" name="service_type" id="service_type" data-placeholder="业务类型">
					            <option value="">业务类型</option>
					            <option value="01" <c:if test="${param.service_type == '01'}">selected</c:if>>优化</option>
					            <option value="02" <c:if test="${param.service_type == '02'}">selected</c:if>>新站</option>
					            <option value="03" <c:if test="${param.service_type == '03'}">selected</c:if>>整站</option>
					        </select>
        				</td>
        				<td>
        					<select class="form-control" name="user_type" id="user_type" data-placeholder="用户类型">
					            <option value="">用户类型</option>
					            <option value="01" <c:if test="${param.user_type == '01'}">selected</c:if>>普通用户</option>
					            <option value="02" <c:if test="${param.user_type == '02'}">selected</c:if>>代理用户</option>
					        </select>
        				</td>
        				<td>
        					<select class="form-control" name="vip_level" id="vip_level" data-placeholder="VIP等级">
					            <option value="">全部等级</option>
					                <c:forEach items="${levelList}" var="engin">
					            	<option value="${engin }" <c:if test="${param.vip_level == engin}">selected</c:if>>${engin  }</option>
					            </c:forEach>
					        </select>
        				</td>
        				
        				<td>
        					<select class="form-control" name="state" id="state" data-placeholder="使用状态">
					            <option value="">全部状态</option>
					            <option value="00" <c:if test="${param.state == '00'}">selected</c:if>>未启用</option>
					            <option value="01" <c:if test="${param.state == '01'}">selected</c:if>>已启用</option>
					        </select>
        				</td>
        				
        				<td>
        					<button type="button" class="btn btn-primary" onclick="searchs();">检索</button>
        				</td>
        			</tr>
        		</table>
			</div>     
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                    	<!-- <a class="btn btn-primary " href="javascript:add();" target="_self">新增</a> -->
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                	<th class="text-center"><input type="checkbox" id="checked_all" onclick="checkOrCancelAll();"/>&nbsp;&nbsp;&nbsp;&nbsp;<span id="choose">全选</span></th>
                                	<th>ID</th>
                                    <th>业务类型</th>
                                    <th>用户类型</th>
                                    <th>vip等级</th>
                                    <th>初始价格</th>
                                    <th>递增指数</th>
                                    <th>递增价格</th>
                                    <th>是否默认</th>
                                    <th>创建时间</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                           		<c:forEach items="${page.list}" var="key" varStatus="vs">
                           			<tr>
                           			<td><input type="checkbox" class="checked_pro" name="checkbox"  value="${key.id }"/></td>
	                                    <td>${key.id }</td>
										<td>
											<c:if test="${key.service_type == '01'}">
												优化
											</c:if>
											<c:if test="${key.service_type == '02'}">
												新站
											</c:if>
											<c:if test="${key.service_type == '03'}">
												整站
											</c:if>
										</td>
										<td>
											<c:if test="${key.user_type == '01'}">
												普通用户
											</c:if>
											<c:if test="${key.user_type == '02'}">
												代理用户
											</c:if>
										</td>
										<td>${key.vip_level }</td>
										<td>${key.init_price }</td>
										<td>${key.add_index }</td>
										<td>${key.add_price }</td>
										<td>
											<c:if test="${key.is_default == '00'}">
												否
											</c:if>
											<c:if test="${key.is_default == '01'}">
												是
											</c:if>
										</td>
										<td>${key.create_time }</td>
										<td>
											<c:if test="${key.state == '00'}">
												未启用
											</c:if>
											<c:if test="${key.state == '01'}">
												已启用
											</c:if>
										</td>
										<td>
											<c:if test="${key.state eq '00'}">
												<a href="javascript:edit('${key.id}');" title="编辑">编辑</a> 
												<a href="javascript:updateState('${key.id}','01');" title="上架">启用</a>
												<%-- <a href="javascript:detele('${key.id}');" title="删除">删除</a> --%>
											</c:if>
											<c:if test="${key.state eq '01'}">
												<a href="javascript:updateState('${key.id}','00');" title="上架">禁用</a>
												<a href="javascript:updateDefault('${key.id}','01');" title="上架">设为默认</a>
											</c:if>
											
										</td>
                               		</tr>
                           		
                           		</c:forEach>
                           		<tr>
			        				<td style="width:1%;">
			      							<span style="float:left;"><button type="button" class="btn btn-primary" onclick="bacthState('01')">批量启用</button></span>
			        				</td>
			        				<td style="width:1%;">
			      							<span style="float:left;"><button type="button" class="btn btn-danger" onclick="bacthState('00')">批量禁用</button></span>
			        				</td>
			        			</tr>
                            </tbody>
                        </table>
                        
                        <jsp:include page="/WEB-INF/jsp/page.jsp">
                        	<jsp:param value="rechargeForm" name="form"/>
                        </jsp:include>
                    </div>
                </div>
            </div>
        </div>
        </form>
    </div>
    <script src="static/templet/js/jquery.min.js?v=2.1.4"></script>
    <script src="static/templet/js/bootstrap.min.js?v=3.3.5"></script>
    <script src="static/templet/js/plugins/peity/jquery.peity.min.js"></script>
    <script src="static/templet/js/plugins/layer/layer.min.js"></script>
    <script src="static/templet/js/iframe.min.js"></script>
    <script src="static/templet/js/plugins/layer/laydate/laydate.js"></script>
    <script type="text/javascript">
    
    $(function(){
		var message = '${param.messages1}';
		if(message =='01') {
			parent.layer.msg('操作成功', {icon: 1});
		}
	})
    
    function searchs(){
    	$("#rechargeForm").submit();
    }
    
	function bacthState(state) {
		
	  var rows = document.getElementsByName("checkbox");
	    if (rows.length== 0) {
	        alert("请先选择要修改的记录!");
	        return;
	    }
	    var ids = '';
	    for (var i = 0; i < rows.length; i++) {
	    	if(rows[i].checked){
	    		ids += rows[i].value + ",";
	    	}
	    }
	    ids = ids.substring(0, ids.length - 1);
	    
		var msg = "";
		if (state == '00') {
			msg = "确定要批量禁用吗?";
		}
		if (state == '01') {
			msg = "确定要批量启用吗?";
		}
		parent.layer.confirm(msg, {
			btn : [ '确定' ], //按钮
			shade : false
		//不显示遮罩
		}, function() {
			$.post("keyWord/revision/updateBacthVipLevelState", {
				ids : ids,
				state : state
			}, function(data, status) {
				if (status == 'success') {
					parent.layer.msg('修改成功', {
						icon : 1
					});
					location.reload();
				} else {
					parent.layer.msg('修改失败', {
						icon : 1
					});
				}
			})
		});
	    
	}
    
	
    
    
    
    function add(){
    	parent.layer.open({
    	    type: 2,
    	    title: '添加等级',
    	    shadeClose: true,
    	    shade: 0.8,
    	    area: ['60%', '80%'],
    	    content: 'keyWord/revision/toAdd',
    	    cancel:function(index, layero){
    	    	iframe.get(layero);
    	    	if(result == 1){
    	    		location.reload(true);
    	    	}
    	    	
    	    }
    	});
    }
    
  //修改
	function edit(id) {
		parent.layer.open({
			type : 2,
			title : '修改等级',
			shadeClose : true,
			shade : 0.8,
			area: ['60%', '80%'],
			content : 'keyWord/revision/toEdit?id=' + id,
			cancel : function(index, layero) {
				iframe.get(layero);
				if (result == 1) {
					location.reload(true);
				}

			}
		});
	}
  
	function detele(id) {
		layer.confirm('确认要删除吗？', function(index) {
			$.ajax({
				type : 'get',
				url : 'keyWord/revision/deleteVipLevel',
				data : {
					id : id
				},
				success : function(data) {
					layer.msg('删除成功!', {
						icon : 1,
						time : 2000
					});
					setTimeout(function() {
						window.location.reload();
					}, 1000)
				},
				error : function(data) {
					console.log(data.msg);
				},
			});
		});
	}
	
	function updateState(id, state) {
		var msg = "";
		if (state == '00') {
			msg = "确定要禁用吗?";
		}
		if (state == '01') {
			msg = "确定要启用吗?";
		}
		parent.layer.confirm(msg, {
			btn : [ '确定' ], //按钮
			shade : false
		//不显示遮罩
		}, function() {
			$.post("keyWord/revision/updateVipLevelState", {
				id : id,
				state : state
			}, function(data, status) {
				if (status == 'success') {
					parent.layer.msg('修改成功', {
						icon : 1
					});
					location.reload();
				} else {
					parent.layer.msg('修改失败', {
						icon : 1
					});
				}
			})
		});

	}
    
	function updateDefault(id, state) {
		var msg = "";
		if (state == '00') {
			msg = "确定要禁用吗?";
		}
		if (state == '01') {
			msg = "确定要设为默认吗?";
		}
		parent.layer.confirm(msg, {
			btn : [ '确定' ], //按钮
			shade : false
		//不显示遮罩
		}, function() {
			$.post("keyWord/revision/updateVipLevelIsDefault", {
				id : id,
				state : state
			}, function(data, status) {
				if (status == 'success') {
					parent.layer.msg('设置成功', {
						icon : 1
					});
					location.reload();
				} else {
					parent.layer.msg('设置失败', {
						icon : 1
					});
				}
			})
		});

	}
	
	  //全选 全不选
    //页面加载的时候,所有的复选框都是未选中的状态
	function checkOrCancelAll(){
		//1.获取checkbo的元素对象
		var chElt=document.getElementById("checked_all");
		//2.获取选中状态
		var checkedElt=chElt.checked;
		//3.若checked=true,将所有的复选框选中,checked=false,将所有的复选框取消
		var allCheck=document.getElementsByName("checkbox");
		//4.循环遍历取出每一个复选框中的元素
		var mySpan=document.getElementById("choose");
		if(checkedElt){
			//全选
			for(var i=0;i<allCheck.length;i++){
				//设置复选框的选中状态
				allCheck[i].checked=true;
			}
			mySpan.innerHTML="取消全选";
		}else{
			//取消全选
			for(var i=0;i<allCheck.length;i++){
				allCheck[i].checked=false;
			}
			mySpan.innerHTML="全选";
		}
	}
	
    </script>

</body>

</html>